@media screen and (min-width: 480px) and (max-width: 768px) {
  .page {
    background: url("./assets/images/top_bg.png") no-repeat 0px 0px / 100%;
    height: 100%;
    .bg-text {
      position: absolute;
      top: 2vw;
      left: 0;
      width: 100%;
      height: 3.7vw;
      padding: 0 3vw;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .bg-text-l {
        width: 15vw;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .bg-texts {
          width: 280px;
          font-size: 2vw;
          color: #6769fb;
          font-weight: bold;
        }
        img {
          width: 2.7vw;
          height: 2.7vw;
        }
      }
      .bg-text-r {
        font-size: 2vw;
        color: #6769fb;
        font-weight: bold;
      }
    }
  }

  .content {
    display: flex;
    justify-content: space-between;
    margin-top: 8vw;
    width: 90%;
    // align-items: center;
  }
  .content-l {
    // width: 70%;
    margin-right: 0vw;
    width: 100%;

    .header {
      width: 100%;
      height: 7.6vw;
      .addNode,
      .deleteNode,
      .editNode,
      .resetNode {
        width: 15.7vw;
        height: 100%;
        border-radius: 1vw;
        padding-left: 0.8vw;
        margin-left: 3vw;
      }

      .addNode {
        margin-left: 0;
        background: #7f91ff;
      }

      .header-text {
        font-size: 2.2vw;
        font-weight: bold;
      }

      .header-ioc {
        width: 3vw;
        height: 3vw;
      }
    }
  }

  .body {
    .publish-subscribe-top {
      height: 17.5vw;
      margin-top: 4.5vw;
    }
    .publish-subscribe-bottom {
      height: 17.5vw;
      margin-top: 0vw;
    }

    .pubSub-item {
      width: 17.5vw;
      height: 17.5vw;
      margin-left: 10vw;
      background: #6769fb;
      padding: 0.8vw 0;
      font-size: 2vw;
      color: white;
      .mask {
        width: 17.5vw;
        height: 17.5vw;
      }
      .publish-title {
        height: 3.5vw;
        font-size: 2.2vw;
        padding: 0 5vw;
        .pubSub-img {
          width: 2vw;
          height: 2vw;
        }
      }
      .edit_btn,
      .delete_btn {
        position: absolute;
        top: calc(50% - 3vw);
        left: calc(50% - 3vw);
        width: 6vw;
        height: 6vw;
        background: none;
        line-height: 2.5vw;
        border-radius: 0.2vw;
        z-index: 99;
        img {
          width: 6vw;
          height: 6vw;
        }
      }

      .publish-bottom {
        height: 3.5vw;
        font-size: 2.2vw;
        padding: 0 5vw;
        .pubSub-img {
          width: 2vw;
          height: 2vw;
        }
      }

      .node {
        width: 65%;
        height: 4.4vw;
        font-size: 2vw;
        border-radius: 3.5vw;
        color: #6769fb;
      }
    }
    .topic {
      height: 13.1vw;
      margin: 8vw 0;
      .topic-items {
        width: 12.8vw;
        height: 13.1vw;
        margin-left: 2vw;
        .topic-pupop {
          top: -13vw;
          width: 18.5vw;
          height: 12.5vw;
          border-radius: 1vw;
          padding: 1.2vw 0.8vw;
          background: #e5e3fa;
          box-sizing: border-box;
          .topic-pupop-title {
            width: 100%;
            height: 3.5vw;
            border-radius: 2vw;
            line-height: 3.5vw;
            font-size: 2vw;
          }
          .topic-pupop-content {
            width: 100%;
            height: 3.5vw;
            margin: 0.7vw 0;
            position: relative;
            .topic-pupop-l {
              width: 100%;
              height: 100%;
              border-radius: 0.8vw;
            }
            .topic-pupop-r {
              position: absolute;
              top: -3.8vw;
              right: 1vw;
              width: 2.5vw;
              height: 2.5vw;
            }
          }
          .topic-pupop-text {
            width: 100%;
            height: 3vw;
            font-size: 1.3vw;
            color: #73739f;
            letter-spacing: 0.1vw;
          }
        }
        .topic-mask {
          width: 12.8vw;
          height: 13.1vw;
        }
        .select-sub {
          width: 3vw;
          height: 3vw;
          top: calc(50% - 1.5vw);
          left: calc(50% - 1.5vw);
        }
        .select-active {
          width: 3vw;
          height: 3vw;
          position: absolute;
          z-index: 99;
          top: calc(50% - 1.5vw);
          left: calc(50% - 1.5vw);
        }

        .topic-tip {
          width: 100%;
          height: 4.1vw;
          border-radius: 2vw;
          padding: 0 1vw;
          .tip-text {
            width: 100%;
            height: 100%;
            font-size: 1.8vw;
            line-height: 4.1vw;
          }
          img {
            width: 2.5vw;
            height: 2.5vw;
          }
        }
        .topic-content {
          width: 100%;
          height: 8.7vw;
          border-radius: 0.8vw;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 2vw;
        }
      }
    }
    .sure-btn {
      position: absolute;
      top: 68vw;
      left: calc(50% - 5vw);
      width: 10vw;
      height: 5vw;
      background: #6769fb;
      text-align: center;
      line-height: 5vw;
      border-radius: 0.8vw;
      font-size: 2.1vw;
      margin: 0;
    }

    .sure-btn-none {
      width: 10vw;
      height: 5vw;
      display: none;
    }
  }
  .content-r {
    position: absolute;
    right: 1vw;
    .popup-node {
      position: relative;
      margin-top: 0;
      width: 96vw;
      box-sizing: border-box;
      padding: 1.8vw 2.9vw;
      background: white;
      border-radius: 2vw;
      box-shadow: #73739f 0px 0.5vw 01vw;

      .close {
        width: 24px;
        height: 24px;
        margin-left: 87vw;
      }
      .topic-change-list {
        width: 100%;
        height: 28vw;
        margin-top: 1vw;
        .title-list {
          width: 100%;
          height: 4.8vw;
          border-radius: 1vw;
          font-size: 2vw;
          line-height: 4.8vw;
          text-align: center;
        }
        .topic-list-box {
          height: 22vw;
          .topic-item {
            height: 3.9vw;
            font-size: 1.5vw;
            .node-name {
              height: 100%;
              width: 8.9vw;
              background: #f5f6f8;
              border-radius: 0.5vw;
              line-height: 3.9vw;
            }
            .node-conten-init {
              height: 100%;
              width: 21.2vw;
              background: #f5f6f8;
              border-radius: 0.5vw;
              line-height: 3.9vw;
            }
            .node-description {
              height: 100%;
              width: 30vw;
              background: #f5f6f8;
              border-radius: 0.5vw;
              line-height: 3.9vw;
              color: #73739f;
              font-size: 1.5vw;
            }
            .node-modification {
              height: 100%;
              width: 28vw;
              background: #f5f6f8;
              border-radius: 0.5vw;
              line-height: 3.9vw;
              font-size: 1.5vw;
            }
          }
        }
      }

      .node-attribute-editing {
        .title-list {
          height: 4.8vw;
          border-radius: 1vw;
          border-radius: 1vw;
          font-size: 2vw;
          line-height: 4.8vw;
          text-align: center;
        }
        .node-attribute-name {
          margin-top: 1.8vw;
          justify-content: start;
          .node-name {
            width: 30vw;
            height: 4.8vw;
            line-height: 4.8vw;
            font-size: 1.8vw;
          }
          .node-box-input {
            width: 21.5vw;
            height: 4.8vw;
            border: 0.2vw solid #eaedf2;
            border-radius: 0.8vw;
            .node {
              font-size: 1.8vw;
              height: 4.8vw;
              line-height: 4.5vw;
            }
            .node-input {
              width: 13vw;
              font-size: 1.8vw;
            }
          }
        }

        .select-box {
          width: 44.8vw;
          height: 17.7vw;
          .pub-box-right,
          .sub-box-left {
            width: 21.5vw;
            height: 100%;
            .sub-select-box {
              height: 4.8vw;
              padding: 0 4.5vw;
              border: 0.4vw solid #f1f3f6;
              border-radius: 1vw;
              .select-title {
                width: 9vw;
                height: 4.8vw;
                font-size: 1.8vw;
                line-height: 4.8vw;
              }
              .drop-down {
                width: 1.2vw;
                height: 1vw;
              }
              .option-item-box {
                width: 21vw;
                top: 4.5vw;
                padding: 1vw 1vw;
                box-sizing: border-box;
                border-radius: 1vw;
                .option-item {
                  margin-top: 1vw;
                  height: 4.8vw;
                  line-height: 4.8vw;
                  font-size: 1.8vw;
                  border-radius: 0.8vw;
                }
              }
            }
            .sub-title {
              width: 100%;
              height: 4.2vw;
              border-radius: 0.8vw;
              line-height: 4.2vw;
              font-size: 1.8vw;
            }
            .sub-content {
              width: 100%;
              height: 7.1vw;
              line-height: 7.1vw;
              font-size: 1.8vw;
            }
          }
        }
      }

      .topic-content-conversion {
        position: absolute;
        width: 43vw;
        height: 17vw;
        bottom: 2vw;
        right: 2vw;
        border: 0.4vw solid #f1f3f6;
        background: white;
        border-radius: 2vw;
        box-sizing: border-box;
        padding: 1vw 2.8vw 2vw;
        .conversion-title {
          height: 3vw;
          font-size: 1.8vw;
          line-height: 3vw;
        }
        .rules-box {
          height: 9vw;
          .rules-line {
            .rules-item {
              height: 3vw;
              .unselect {
                width: 2vw;
                height: 2vw;
              }
              .select {
                width: 2vw;
                height: 2vw;
              }
              .rule-text {
                width: 12vw;
                font-size: 1.6vw;
              }
            }
          }
        }
      }
      .sure-btn-popup {
        position: absolute;
        bottom: 21vw;
        right: 3.5vw;
        margin: 0;
        width: 14vw;
        height: 4.8vw;
        font-size: 2vw;
        line-height: 4.8vw;
        border-radius: 1vw;
      }
    }
  }
}
